<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>学生选择学生界面</title>
	<link rel="stylesheet" href="">
	<link rel="stylesheet" type="text/css" href="../../css/api.css">
	<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../../css/base.css">
</head>
<style type="text/css">
	body{
		-webkit-user-select:none; 
        -moz-user-select:none; 
        -ms-user-select:none; 
        user-select:none;
	}
	.section{
		/* width: 33.33333333333333333333%; */
		height: 40px;
		/* margin-top: 10px; */
		background-color: white;
		text-align: center;
		line-height: 40px;
		float: left;
		position: relative;
		color: black;
		font-size: 16px;
        border: 1px solid #dedede;
	}
	.main{
    	position: relative;
    }
    #middle{
    	position: relative;
    	/* background-color: red; */
    }
    #teamName{
    	position: absolute;
    	left: 24px;
    	right: 24px;
    	text-align: center;
    	/* background-color: yellow; */
    }
    #arrow_down{
    	position: absolute;
    	top: 9px;
    	right: 3px;
    	width: 20px;
		height: 20px;
    }
    .duigouFrame{
        width: 14px;
        height: 14px;
    }
    .mui-table-view-cell {
    	clear: both;
    	width: 100%;
		height: 40px;
		line-height: 40px;
        background-color: white;
        color: black;
        vertical-align: middle;
        padding: 0px;
    }
	.mui-table-view-cell.mui-active{
		color: black;
		background-color: #f0f0f0;
	}
    .cell1{
        width: 25%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		float: left;
		position: relative;
		font-size: 14px;
		vertical-align: middle;
		color: black;
    }
    .cell2{
        width: 50%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		float: left;
		position: relative;
		font-size: 14px;
		vertical-align: middle;
		color: black;
    }
    .cell3{
        width: 25%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		float: left;
		position: relative;
		font-size: 14px;
		vertical-align: middle;
		color: black;
    }
</style>
<body>
	<div class="main" id="main"  style="margin-top: 10px;">
	    <div id="header"  class="header" >
	    	<div id="checkdeAllBtn" class="section" style="width: 25%;" onclick="allselect()">全选</div>
		    <div id="middle" class="section"  style="width: 50%;" onclick="openGroupClick()"><span id="teamName">全部分组</span><img id="arrow_down" src="../../image/icon_category_down.png" class="arrow_down" alt="">
		    </div>
		    <div id="right" class="section" style="width: 25%;" >
		    	学生姓名
		    </div>
	    </div>
	    <div id="checkboxes" class="zhongjian">
            <!-- <div class="cellbox">
            	<div id="left" class="cell">
					<div class="mui-input-row mui-checkbox mui-left " style="height: 38px;" >
					<input name="checkbox" value="Item 0" type="checkbox" >
					</div>
			    </div>
			    <div id="middle" class="cell">
				    产品组
			    </div>
			    <div id="right" class="cell">
			    	吕磊
			    </div>
            </div> -->
	    </div>
	</div>
</body>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript">

    openGroup = 0;    //默认选择分组关闭
    var dataSource = [];   //总的数据源 不动的

	var USER = [];    //全局所有的用户数组
	var allUids = [];  //所有可评的uid
	var allName = [];  //所有可评的名字

	var TEAM = [];    //全局小组名
	var stuDataSourece = [];   //学生按小组分的所有信息的数组
	var stuUidGroup = [];    //获得全局每个小组里的可评uid的数组

	var data = "";    //当前展示的数据

	var whiteGou = '';  
	var greenGou = '';
    
    var tmpClickArr = [];   //存放临时点击的uid
    var nameArray=[];
    var selectAllYesOrNo = 0;   //是否点了全选
    var currentShowGroup = 0;
    
	apiready = function(){
	   	SendBehaviorTrajectoriesNotifi(0, '学生选择学生', '047');
		whiteGou = '../../image/icon_unselecDuigou.png';
		greenGou = '../../image/icon_duigou.png';
		// alert(JSON.stringify($api.getStorage('tmpSelectedUid')));
		if ($api.getStorage('tmpSelectedUid').length > 0) {
			tmpClickArr = $api.getStorage('tmpSelectedUid');
		}
		if ($api.getStorage('tmpSelectedName')!=undefined&&$api.getStorage('tmpSelectedName').length > 0) {
			nameArray = $api.getStorage('tmpSelectedName');
		}
      	loadData();
		// alert("uid"+$api.getStorage('cfnetppuid'));
		// alert("jid"+$api.getStorage('cfnetppjxid'));
		// alert("pid"+api.pageParam.pid);
		// alert("rid"+api.pageParam.cid);
		// $api.setStorage('tmpSelectedUid', "");

     	api.addEventListener({
	        name: 'selectTeamStuNotification'
	    }, function(ret, err) {
	    	openGroupClick();
	        // alert(JSON.stringify(ret.value.value));
	        // alert(ret.value.index);
	        // var arr = dataSource[ret.value.index];
	        // initCellData(arr);
	        if (ret.value.index == 100) {
                currentShowGroup = 100;
	        	initCellDataStu(USER);
	        	$('#teamName').text("全部分组");
	        }else{
	        	currentShowGroup = ret.value.index;
	        	if (TEAM.length == 1) {
                	initCellDataStu(USER);
                	var str = TEAM[0].toString()+"";
                	$('#teamName').text(str);
                } else {
                	var str = TEAM[ret.value.index].toString()+"";
                	initCellDataStu(stuDataSourece[ret.value.index]);
                	$('#teamName').text(str);
                }
	        	if ($('#teamName').text().length>10) {
                   var aaa = $('#teamName').text();
                   aaa = aaa.substr(0,10);
                   $('#teamName').text(aaa+"...");
	        	}
	        }
	    });
     	api.addEventListener({
	        name: 'scrollTop'
	    }, function(ret, err) {
	    	$('html,body').animate({scrollTop: '0px'}, 100);
	    });
     	api.addEventListener({
	        name: 'closeSelectTeamFrameNotification'
	    }, function(ret, err) {
            hideSelectTeam();
            openGroup = 0;
	    });
     	api.addEventListener({
	        name: 'selectctStuNotification'
	    }, function(ret, err) {
            //tmpSelectedUid  tmpClickArr
            if (tmpClickArr.length > 0) {
            	$api.setStorage('tmpSelectedUid', tmpClickArr);
            	api.closeWin();
            	// alert(JSON.stringify(tmpClickArr));
            }else{
            	ShowToast("请选择学生");
            }
	    });
	}
	function loadData () {
        showProgress();
        var params = {
        	uid : $api.getStorage('cfnetppuid'),
        	jid : $api.getStorage('cfnetppjxid'),
        	pid : api.pageParam.pid,
        	vid : api.pageParam.vid,
        	cid : api.pageParam.cid
        };
//	    alert(JSON.stringify(params));
//	    alert(url_getSitenowScoreUser);
	    cfnetppPOST(url_getSitenowScoreUser,params,true,function(data, status){
            api.hideProgress();
            if (status == 'success') {
				if (data.code == 200) {
					// alert(JSON.stringify(params));
					// alert(JSON.stringify(data));
                    $('#main').show();
					$('#header').show();
					dataSource = data.data;
                    for (var j = 0; j < dataSource.length; j++) {
						var tmpdata = dataSource[j];
						var item = {};
						item.uid = tmpdata.uid;
						item.rename = tmpdata.rename;
						item.teamname = tmpdata.teamname;
						item.huping = tmpdata.huping;
						USER.push(item);
						addObject(item.teamname);
						if (item.huping == 1) {   //所有可评的uid
							allUids.push(item.uid);
							allName.push(item.rename);
						}
						  
					}
					// alert(JSON.stringify(TEAM));
					// alert(JSON.stringify(allUids));
                    currentShowGroup = 100;
					initCellDataStu(USER);
                    if (TEAM.length > 1) {
                    	for (var i = 0; i < TEAM.length; i++) {
	                    	var title =  TEAM[i];
	                    	// alert(title);
	                    	var item = [];
	                    	for (var j = 0; j < dataSource.length; j++) {
	                    		if (dataSource[j].teamname == title) {
	                    			item.push(dataSource[j]);
	                    		}
	                    	}
	                    	stuDataSourece.push(item);
	                    }
	                    for (var i = 0; i < stuDataSourece.length; i++) {
	                    	var aaa = stuDataSourece[i];
	                    	var item = [];
	                    	for (var j = 0; j < aaa.length; j++) {
	                    		var bbb = aaa[j];
	                    		if (bbb.huping == 1) {
	                    			item.push(bbb.uid);
	                    		}
	                    	}
	                    	stuUidGroup.push(item);  //获得全局每个小组里的可评uid的数组
	                    }
	                    // alert(JSON.stringify(stuUidGroup));
                    } else {
                    	stuDataSourece = dataSource;
                    }
				}
			}
		});
	}
	function addObject (teamname) {
		if ($.inArray(teamname,TEAM) > -1)  {
			
		} else {
			TEAM.push(teamname);
		}
	}
	function initCellDataStu (data) {
		var content = "";
		if (data.constructor == Array && data.length > 0){
		  	for (var j = 0; j < data.length; j++) {
	        	var user = data[j];
				var onclick = '';
	            var label = '';
	            var imgColor = '';
	           
				if (user.huping == 2) {
					label = '<span style="position: absolute;right: 0px;">已评</span>';
				}else{
					onclick = ' onclick="clickCell(\'' + user.rename + '\','+user.uid+')"';
				}
                if (isContains(user.uid,tmpClickArr)) {
                	imgColor = greenGou;
                }else{
                	imgColor = whiteGou;
                }
	            content += '<div class="mui-table-view-cell"'+ onclick +'">'+
	            	'<div id="left" class="cell1">'+
						'<img class="duigouFrame" id="index'+user.uid+'" src="'+imgColor+'" alt="">'+label+
				    '</div>'+
				    '<div id="middle" class="cell2">'+
					    user.teamname+
				    '</div>'+
				    '<div id="right" class="cell3">'+
				    	user.rename+
				    '</div>'+
	            '</div>';
			}
		}
        // alert(JSON.stringify(TEAM));
		$('#checkboxes').html(content);
		// alert(JSON.stringify(content));
	}
	function clickCell(name,uid) {
    	var imgId = "index"+uid;
        // alert("前"+JSON.stringify(tmpClickArr));
		if (isContains(uid,tmpClickArr)) {
			removeByValue(tmpClickArr,uid);
			removeByValue(nameArray,name);
			// alert("移除了");
	        $('#'+imgId).attr('src', whiteGou);
		} else {
			tmpClickArr.push(uid);
			nameArray.push(name)
			// alert("添加了");
	        $('#'+imgId).attr('src', greenGou);
		}
		// alert("后"+JSON.stringify(tmpClickArr));
        $api.setStorage('tmpSelectedUid', tmpClickArr);
        $api.setStorage('tmpSelectedName', nameArray);	
    }
    function allselect() {  //全选按钮被点击
		// var tmpUid = [];  //实时全选按钮控制的当前分组的uid数组
    	// if (currentShowGroup == 100) {
     //        	tmpUid = allUids;
     //        } else {
     //        	tmpUid = stuUidGroup[currentShowGroup];
     //        }
    	if (selectAllYesOrNo == 0) {
    		selectAllYesOrNo = 1;
            // for (var i = 0; i < tmpUid.length; i++) {
            // 	tmpClickArr.push(tmpUid[i]);
            // }
            tmpClickArr = allUids;
            nameArray =  allName;
			$api.setStorage('tmpSelectedUid', tmpClickArr);
            $api.setStorage('tmpSelectedName', nameArray);
			// alert("选了"+$api.getStorage('tmpSelectedUid').length);
			for (var i = 0; i < tmpClickArr.length; i++) {
				var imgId = "index"+tmpClickArr[i];
				$('#'+imgId).attr('src', greenGou);
			}
			$('#checkdeAllBtn').html("取消全选");
    	} else {
    		selectAllYesOrNo = 0;
			tmpClickArr = [];
			nameArray=[];
			$api.setStorage('tmpSelectedUid', '');
			$api.setStorage('tmpSelectedName', '');
			// alert("取消"+$api.getStorage('tmpSelectedUid').length);
			for (var i = 0; i < allUids.length; i++) {
				var imgId = "index"+allUids[i];
				$('#'+imgId).attr('src', whiteGou);
			}
			$('#checkdeAllBtn').html("全选");
    	}	
	}
    function isContains(obj, arr) {
		if ($.inArray(obj, arr) != -1) {
			return true;
		}
	}
    function removeByValue(arr, val) {
		for(var i=0; i<arr.length; i++) {
		    if(arr[i] == val) {
		      	arr.splice(i, 1);
		      	break;
		    }
		}
	}
	function openGroupClick () {
		if (openGroup == 0) {
			showSelectTeam();
            openGroup = 1;
		}else{
            hideSelectTeam();
            openGroup = 0;
		}
	}
	function showSelectTeam(){
		openframe();
		api.setFrameAttr({
		    name: 'selectTeamStu',
		    hidden: true
		});
	}
	function hideSelectTeam(){
		api.setFrameAttr({
		    name: 'selectTeamStu',
		    hidden: false
		});
	}
	function openframe() {
		var y = 44+22+40+10;
		var h = 'auto';
		dataSource = stuDataSourece;
		api.openFrame({
			name : 'selectTeamStu',
			url : 'selectTeamStu.html',
			rect : {
				x : 0,
				y : y,
				w : 'auto',
				h : h
			},
			pageParam : {
				sections :  TEAM
			}
		});
	}
</script>
</html>
